import React, { useEffect, useState } from 'react'
import styles from './index.module.scss'
import Tabs from '../../components/Tabs'
import { useDispatch, useSelector } from 'react-redux'
import { getAllChannels, getUserChannels } from '../../store/action/home'
import Icon from '../../components/Icon'
import { Popup } from 'antd-mobile'
import Channels from './components/Channels'
import ArticleList from './components/ArticleList'
import MoreAction from './components/MoreAction'

export default function Home() {
  const [visible3, setVisible3] = useState(false)
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getUserChannels())
    dispatch(getAllChannels())
  }, [dispatch])
  const tabs = useSelector((state) => state.home.userChannels)
  // 控制高亮
  const [active, setActive] = useState(3)
  const onClose = () => {
    // 关闭抽屉
    setVisible3(false)
  }
  const changeActive = (e) => {
    setActive(e)
  }
  return (
    <div className={styles.root}>
      <Tabs tabs={tabs} index={active} onChange={changeActive}>
        {/* 放对应数量的ArtcleList */}

        {tabs.map((item) => (
          <ArticleList
            key={item.id}
            channelId={item.id}
            activeId={tabs[active].id}
          ></ArticleList>
        ))}
      </Tabs>
      {/* 频道 Tab 栏右侧的两个图标按钮：搜索、频道管理 */}
      <div className="tabs-opration">
        <Icon type="icon-search" />
        <Icon
          type="icon-channel"
          onClick={() => {
            setVisible3(true)
          }}
        />
      </div>
      {/* 频道管理组件 */}

      <Popup
        visible={visible3}
        onMaskClick={() => {
          setVisible3(false)
        }}
        position="left" //弹出方向
        bodyStyle={{ width: '90vw' }}
      >
        {/* 存放数据 */}
        <Channels
          onClose={onClose}
          index={active}
          onChange={changeActive}
        ></Channels>
      </Popup>
      <MoreAction></MoreAction>
    </div>
  )
}
